@import "~pc/styles/lib_var.less";
@import "~pc/styles/lib_mixins.less";
@import "~pc/styles/lib_screen.less";

.publish {
  height: 208px;
  display: flex;
  flex-direction: column;
}
// pc
.publicLink {
  position: relative;
  height: 100%;

  .sharing {
    padding: 24px 24px 0 0;
  }

  .unShare {
    padding-right: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .tip {
      font-size: 14px;
      color: var(--secondLevelText);
      padding-top: 24px;
    }
  }
}

.shareTips {
  height: 208px;
  padding: 24px;
  padding-top: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .shareOpenButton {
    align-self: center;
  }
}

.disabledLink {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0 8px 8px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  // .backgroundBlur (var(--fc8), 80%, 16px);

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
  }

  .subTitle {
    margin-bottom: 32px;
  }

  .reopenBtn {
    margin-bottom: 16px;
  }
}

// Mobile
.mobilePublicLink {
  .sharing {
    padding-right: 0;
  }

  .unShare {
    padding-right: 0;

    img {
      height: 180px;
      width: auto;
      margin-bottom: 24px;
    }

    .tip {
      padding-top: 24px;
    }
  }
}

.disabledFileSharable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
  padding-bottom: 32px;

  img {
    width: 320px;
    height: 192px;
    margin-bottom: 24px;
  }

  .desc {
    margin-top: 8px;
    color: var(--thirdLevelText);
  }
}

.jumpBtn {
  color: var(--thirdLevelText);
  display: flex;
  align-items: center;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: 0;

  &.center {
    width: 100%;
    justify-content: center;
  }

  svg {
    fill: var(--thirdLevelText);
  }
}

.tipItem {
  display: flex;

  .bold {
    font-weight: bold;
  }

  .tipContent1,
  .tipContent2 {
    color: var(--firstLevelText);
    padding-left: 4px;
  }

  .tipContent1 {
    padding-bottom: 16px;
  }

  .tipContent2 {
    padding-bottom: 8px;
  }

  &::before {
    display: inline-block;
    content: "";
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--fourthLevelText);
    flex-shrink: 0;
    margin-top: 10px;
  }
}
.linkNodes {
  padding-left: 7px;
  max-height: 72px;
  overflow: auto;
  .light-scroll-bar();

  .linkNode {
    padding-bottom: 8px;
    position: relative;
    line-height: 14px;
    font-size: 12px !important;
    font-weight: normal !important;
    display: flex;

    &::before {
      content: "";
      width: 4px;
      height: 1px;
      background: var(--thirdLevelText);
      flex-shrink: 0;
      margin-top: 6px;
    }

    .linkNodeName {
      flex: 1;
      color: var(--thirdLevelText);
      padding-left: 4px;
      display: -webkit-box;
      word-break: normal;
      word-wrap: break-word;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      // .ellipsis();
      cursor: default;
    }
  }
}

.displayAlignCenter {
  display: flex;
  align-items: center;
}

// Switch for sharing links
.shareToggle {
  padding-bottom: 18px;
  .displayAlignCenter();

  .shareToggleContent {
    margin: 0 4px 0 8px;
  }
  svg {
    fill: var(--fc3);
  }
  a {
    line-height: 1;
  }
}

// Shared by
.sharePerson {
  margin-bottom: 8px;
  .displayAlignCenter();

  .sharePersonContent {
    margin-right: 4px;
    color: var(--textCommonSecondary);
  }

  .sharePersonAuth {
    color: var(--textBrandDefault);
    cursor: pointer;
    .displayAlignCenter();

    svg {
      fill: var(--textBrandDefault);
    }
  }
  :global {
    .outerTrigger {
      color: var(--primaryColor);
    }
  }
}


// Invitation QR code popover
.qrCodePopover {
  :global {
    .ant-popover-inner-content {
      padding: 0;
    }
  }
}

.error {
  color: var(--textDangerDefault);
}

.qrCodePopoverContent {
  padding: 24px;
  width: 256px;
}

// Invitation QR code mobile modal
.qrCodeMobile {
  position: relative;

  .qrCodeCloseIcon {
    width: 40px;
    height: 40px;
    bottom: -64px;
    left: 50%;
    border-radius: 50%;
    background-color: var(--deepMaskColor);
    transform: translateX(-50%);
    position: absolute;
    justify-content: center;
    .displayAlignCenter();
  }
}

// QR code for invitation
.downloadQrCodeHeader {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;

  .downloadQrCodeTitle {
    margin-left: 8px;
    line-height: 24px;
    color: var(--textCommonPrimary) !important;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.downloadQrCodeImage {
  border: 1px solid var(--borderCommonDefault);
  border-radius: 4px;
  margin-bottom: 8px;
  box-sizing: border-box;
  justify-content: center;
  position: relative;
  .displayAlignCenter();
}

.downloadQrCodeLogo {
  width: 36px;
  height: 36px;
  border: 2px solid var(--bgCommonDefault);
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  .displayAlignCenter();
}

// Download the end of the QR code
.downloadQrCodeFooter {
  color: var(--textCommonTertiary) !important;
  text-align: center !important;
  margin-bottom: 16px !important;
}

.doubleSelect {
  border: none !important;
  background-color: transparent !important;
  svg {
    fill: var(--textBrandDefault);
  }
  :global {
    .optionLabel {
      color: var(--textBrandDefault) !important;
      font-size: 14px !important;
    }
  }
}

.mobileWrapper {
  background: var(--defaultBg);
  border-radius: 8px;
  padding: 0 16px;
}

.mobileOption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;

  &:not(:first-child) {
    border-top: 1px solid var(--lineColor);
  }
  p:nth-child(2) {
    color: var(--thirdLevelText);
  }
}

// More ways to invite
.inviteMore {
  padding: 14px 0;
  border-top: 1px solid var(--borderCommonDefault);
  margin-top: auto;
  .displayAlignCenter();

  .inviteMoreTitle {
    margin-right: 16px;
    color: var(--textCommonSecondary);
  }

  .inviteMoreMethod {
    margin-right: 24px;
    color: var(--textCommonSecondary);
    cursor: pointer;
    .displayAlignCenter();

    svg {
      margin-right: 4px;
    }
  }
}

.shareCodeModal {
  width: auto !important;

  :global {
    .ant-modal-content {
      box-shadow: none;
      background: transparent;
      border: 0;
    }

    .ant-modal-body {
      padding: 0 0 16px !important;
    }
  }
}

@media screen and (max-width: @w-md) {
  .sharePersonAuthMobile {
    :global {
      .ant-drawer-wrapper-body, .ant-drawer-header, .ant-drawer-body {
        background-color: var(--bgCommonLower);
      }
    }
  }
  .inviteMore {
    padding-bottom: 0;
  }
}

.shareLink {
  display: flex;
  flex-direction: row;
  padding-bottom: 24px;

  .inputContainer {
    flex: 1;
    height: 40px;
    position: relative;
    display: flex;
    .inputButton {
      border-radius: 0 6px 6px 0;
      height: 100%;
      width: 40px;
    }
    .link {
      width: 100%;
      height: 100%;
      background-color: var(--bgControlsDefault);
      line-height: 40px;
      padding: 0 8px;
      cursor: default;
      font-size: 14px;
      color: var(--firstLevelText);
      border-radius: 4px 0 0 4px;;
      border: 1px solid transparent;
      outline: none;
      &:hover {
        cursor: text;
      }
    }

    .highBorder {
      border-color: var(--primaryColor);
      transition: border 0.3s linear;
    }

    .inner_tip {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      line-height: 40px;
      text-align: right;
      padding: 0 8px 0 16px;
      color: var(--firstLevelText);
      background-color: var(--rowSelectedBg);
    }
  }

  .iconOffset {
    margin-top: 2px;
  }
}